<template>
    <div style="width: 100%;   margin-bottom:20px;">
       <!-- 会员信息的展示 -->
       <el-row>
           <el-col :span="20" > <h3>{{memberHeaderData}}</h3></el-col>
           <el-col :span="4"> <el-button type="primary" @click="editMember">编辑会员</el-button></el-col> 
       </el-row>
         <el-form :inline="true" :model="memberMsg" class="member-form"  :disabled="isEdit"  label-width="80" label-position="left">
              <el-form-item label="会员姓名">
               <template #label>
                   <h4>会员姓名</h4>
               </template>
              <el-input v-model="memberMsg.name"/>
              </el-form-item>       
              <el-form-item label="性别">
                <template #label>
                       <h4>性别</h4>
                   </template>
                   <el-radio v-model="memberMsg.gender" value="男" size="large">男</el-radio>
                   <el-radio v-model="memberMsg.gender" value="女" size="large">女</el-radio>
              </el-form-item>
              <el-form-item label="手机号">
                 <template #label>
                      <h4>手机号</h4>
                  </template>
                  <el-input v-model="memberMsg.tel" />
              </el-form-item>
              <el-form-item label="出生日期">
               <template #label>
                          <h4>出生日期</h4>
                      </template>
                   <el-date-picker
                       v-model="memberMsg.birthday"
                       type="date"
                       placeholder="yyyy-mm-dd"
                        format="YYYY-MM-DD"
                       value-format="YYYY-MM-DD"
                       style="width: 100%"
                   />
               </el-form-item>
              <el-form-item label="备注">
                   <template #label>
                      <h4>备注</h4>
                  </template>
                  <el-input v-model="memberMsg.remark" type="textarea" />
               </el-form-item>
     
          </el-form>
    </div>
    <div>
       <el-tabs v-model="activeName"  type="border-card"  @tab-click="handleClick">
           <el-tab-pane label="会员卡信息" name="first">
               <el-table :data="cardInfoData" style="width: 100%"  
               size="small"
               :default-sort="{ prop: 'cardName', order: 'descending' }">
                   <el-table-column fixed  prop="cardName" sortable label="会员卡"  />
                   <el-table-column prop="cardType" sortable label="卡类型"  />
                   <el-table-column prop="availCount" sortable label="可用次数" />
                   <el-table-column prop="endTime" sortable  label="到期时间" />
                   <el-table-column  sortable  label="停用/激活">
                       <template #default="scope">
                            <el-switch
                               v-model="scope.row.status"
                               active-value="激活"
                               inactive-value="未激活"
                                active-color="#64bd63"
                               inactive-color="#c0c0c0"
                            @change="changeSwitch(scope.row.status)"
                              />
                       </template>
                   </el-table-column>
                   <el-table-column label="操作" width="180" align="center">
                        <template #default="scope">
                           <el-row  class="btn-opt">
                               <el-button type="primary" size="small" :disabled="scope.row.status==='未激活'" @click="rechargeDrawer=!rechargeDrawer">充值</el-button>
                               <el-button type="success" size="small" :disabled="scope.row.status === '未激活'" @click="openConsume(scope.row)">扣费</el-button>
                               <el-button type="danger" size="small" @click="openOperateRecord(scope.row)">操作记录</el-button>
                           </el-row>
                       </template>
                   </el-table-column>
               </el-table>
          
                 <el-pagination class="mt20" layout="prev, pager, next"  background  size="small" 
                  :page-size="cardPage.pageSize"
                  :total="cardPage.total"
                   v-model:current-page="cardPage.currentPage"
                   @current-change="handleCurrentChange"/>
           </el-tab-pane>
           <el-tab-pane label="预约记录" name="second">
                <el-table :data="reserveInfoData" style="width: 100%"  size="small">
                        <el-table-column prop="courseName" sortable label="课程" />
                        <el-table-column prop="reserveTime" sortable label="预约时间"  />
                        <el-table-column prop="cardName" sortable label="会员卡" />
                        <el-table-column prop="reserveNumbers" sortable label="预约人数" />
                        <el-table-column prop="operateTime" sortable label=操作时间 />
                        <el-table-column prop="operator" sortable label="操作人" />
                        <el-table-column prop="reserveNote" sortable label="预约备注" />
                    </el-table>
               
                  <el-pagination 
                   class="mt20"
                    size="small"
                    background
                    layout="prev, pager, next"   
                    :total="cardPage.total"
                    v-model:current-page="cardPage.currentPage"
                    @current-change="handleCurrentChange"
                    />    
           </el-tab-pane>
           <el-tab-pane label="上课记录" name="third">
             <el-table :data="classInfoData" style="width: 100%"  size="small">
                        <el-table-column prop="courseName" sortable label="课程" width="80"/>
                        <el-table-column prop="classTime" sortable label="上课时间"  />
                        <el-table-column prop="teacherName" sortable label="授课老师"  width="90"/>
                        <el-table-column prop="cardName" sortable label="会员卡"  width="80"/>
                        <el-table-column prop="timesCost" sortable label="使用次数" width="90"/>
                        <el-table-column prop="comment" sortable label="老师评价" />
                        <el-table-column sortable label="确认状态" >
                            <template #default="scope">
                                <el-button type="primary" v-if="scope.row.checkStatus" size="small">已确认</el-button>
                                <el-button type="danger" v-else size="small">未确认</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                  <el-pagination  
                    class="mt20"
                    layout="prev, pager, next"   
                    :total="10"
                    background
                     size="small"
                   />    
           </el-tab-pane>
           <el-tab-pane label="消费记录" name="fourth">
              <el-table :data="consumeInfoData" style="width: 100%"  size="small">
                    <el-table-column prop="cardName" sortable label="会员卡" width="80"/>
                    <el-table-column prop="operateTime" sortable label="操作时间"  />
                    <el-table-column prop="cardCountChange" sortable label="消费次数" />
                    <el-table-column prop="timesRemainder" sortable label="剩下次数" />
                    <el-table-column prop="moneyCost" sortable label="消费金额" />
                    <el-table-column prop="operateType" label="操作类型"/>
                    <el-table-column prop="operator"  label="操作人" />
                    <el-table-column prop="note"  label="备注" />
                </el-table>
                   <el-pagination 
                     class="mt20"
                       layout="prev, pager, next"   
                       :total="10"
                       background
                       size="small"
                       />    
           </el-tab-pane>
        </el-tabs>       
    </div>
      <!-- 充值的抽屉 -->
    <el-drawer v-model="rechargeDrawer"
        size="50%"
        :append-to-body="true"
        :before-close="handleClose"
    >
      <template #header>
        <h2>充值</h2>
      </template>
          <div class="div-form">
            <el-form :model="rechargeForm" 
            label-width="120" 
            label-position="top"
            >
        <el-form-item label="充值次数">
             <template #label>
              <h4>充值次数</h4>
             </template>
           <el-input-number
                    v-model="rechargeForm.validCount"
                    :min="1"
                    controls-position="right"
                    class="w50"
                />
        </el-form-item>
        <el-form-item label="延长有效期">
              <template #label>
                  <h4>延长有效时间</h4>
               </template>
          <el-input-number
                        v-model="rechargeForm.validDay"
                        :min="1"
                        controls-position="right"
                        class="w50"
                    />
        </el-form-item>
        <el-form-item label="实收金额(元)">
              <template #label>
               <h4>实收金额(元)</h4>
              </template>
              <el-input  placeholder="金额" class="w50" v-model="rechargeForm.receivedMoney">
                <template #prepend><span>￥</span></template>
                <template #append><span>元</span></template>
           </el-input>
        </el-form-item>  
        <el-form-item label="支付方式">
            <template #label>
                   <h4>支付方式</h4>
             </template>
         <el-select v-model="rechargeForm.payMode" placeholder="-请选择-">
                <el-option label="现金" value="xianjin" />
                <el-option label="支付宝" value="zhifubao" />
                <el-option label="微信" value="weixin" />
                <el-option label="银行卡" value="yinhangka" />
              </el-select>
        </el-form-item>
        
        <el-form-item label="备注">
         <template #label>
           <h4>备注</h4>
          </template>   
          <el-input v-model="rechargeForm.note" type="textarea"  placeholder="备注支付信息..."/>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="saveRechargeInfo">保存</el-button>
          <el-button @click="rechargeDrawer=!rechargeDrawer">关闭</el-button>
        </el-form-item>
      </el-form>
              
          </div>
   </el-drawer>
   <!-- 扣费的抽屉 -->
   <el-drawer v-model="consumeDrawer" size="50%"  :append-to-body="true"
            :before-close="handleClose" >
    <template #header>
        <h3>扣费</h3>
    </template>
       <div class="div-form">
                <el-form :model="consumeForm" 
                label-width="120" 
                label-position="top"
                >
            <el-form-item label="课程"  style="margin-bottom:60px">
                 <template #label>
                  <h4>课程</h4>
                 </template>
                <el-select v-model="consumeForm.scheduleId"
                    placeholder="-请选择-"
                    filterable
                    remote
                    reserve-keyword
                    :remote-method="remoteMethod"
                    :loading="loading"
                    >
                        <template #header>
                            <el-row >
                                <el-col :span="3"><h3>id</h3></el-col>
                                <el-col :span="7"><h3>课程名</h3></el-col>
                                <el-col :span="7"><h3>老师</h3></el-col>
                                <el-col :span="7"><h3>上课时间</h3></el-col>
                            </el-row>
                        </template>
                       <el-option
                        v-for="item in remoteClassData"
                        :key="item.scheduleId"
                        :label="item.courseName"
                        :value="item.courseName"
                        >
                        <el-row>
                            <el-col :span="3"><span>{{ item.scheduleId }}</span></el-col>
                            <el-col :span="7"><span>{{ item.courseName }}</span></el-col>
                            <el-col :span="7"><span >{{ item.teacherName }}</span></el-col>
                            <el-col :span="7"><span >{{ item.classDateTime }}</span></el-col>
                        </el-row>
                         
                        </el-option>

                         <template #loading>
                            <svg class="circular" viewBox="0 0 50 50">
                                <circle class="path" cx="25" cy="25" r="20" fill="none" />
                            </svg>
                        </template>
                      </el-select>
            </el-form-item>
            <el-form-item label="扣除次数">
                  <template #label>
                      <h4>扣除次数</h4>
                   </template>
              <el-input-number
                            v-model="consumeForm.cardCountChange"
                            :min="1"
                            controls-position="right"
                            placeholder="必须大于0"
                            style="width:100%"
                        />
            </el-form-item>
            <el-form-item label="消费金额(元)">
                  <template #label>
                   <h4>消费金额</h4>
                  </template>
                  <el-input-number
                      v-model="consumeForm.amountOfConsumption"
                      :min="1"
                      controls-position="right"
                      placeholder="必须大于0"
                      style="width:100%"
                  />
            </el-form-item> 
        
            <el-form-item label="备注">
             <template #label>
               <h4>备注</h4>
              </template>   
              <el-input v-model="consumeForm.note" type="textarea"  placeholder="备注支付信息..."/>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="saveConsumeInfo">保存</el-button>
              <el-button @click="consumeDrawer = !consumeDrawer">关闭</el-button>
            </el-form-item>
          </el-form>
          </div>
   </el-drawer>
   <!-- 操作记录的弹框 -->
   <el-drawer v-model="operateRecordDrawer" size="50%"   :append-to-body="true"
            >
       <template #header>
            <h3>操作记录</h3>
        </template>
        <div class="div-form">
            <el-form  size="small" style="float:right">
                  <el-form-item label="搜索">
                 <el-input v-model="search"/>
                 </el-form-item>
            </el-form>
            <el-table :data="filterTableData" style="width: 100%"  size="small">
                <el-table-column label="操作时间" sortable prop="operateTime" width="165"/>
                <el-table-column label="操作类型"  prop="operateType" />
                <el-table-column label="次数变化" prop="changeCount"  width="80"/>
                <el-table-column label="金额变化"  prop="changeMoney" />
                <el-table-column label="操作人"  prop="operator" />
                <!-- <el-table-column label="备注" sortable prop="cardNote" /> -->
                <el-table-column label="状态"  prop="status" />
      </el-table>
        </div>
    </el-drawer>    

</template>

<script setup>
import {ref,reactive,computed} from 'vue'
import {getCardInfo,getConsumeInfo,getReserveInfo,getClassInfo, getOperateRecord , getRemoteClass }  from '@/api/member'
// 父组件传递数据  会员信息
const {memberMsg} = defineProps(['memberMsg'])
//会员卡分页数据
const cardPage = reactive({
    pageCurrent: 1,
    pageSize: 2,
    total: 10
})
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    cardPage.pageCurrent = val
    getData()
}


const isEdit = ref(true)
//会员编辑
const editMember = () => {
    isEdit.value = !isEdit.value
    //todo 调用后台 编辑的数据传递给后台
}

//计算属性 会员信息
const memberHeaderData = computed(() => memberMsg.name.concat('(').concat(memberMsg.tel).concat(')') )

const activeName = ref('first')
//测试数据
const cardInfoData = ref([])
// 预约记录数据 reserveInfoData
const reserveInfoData = ref([])
// 上课记录数据 classInfoData
const classInfoData =ref([])
//消费记录数据模拟 consumeInfoData
const consumeInfoData =ref([])
//获取表格中的数据
const  getData=()=>{
    getCardInfo({pageNum:cardPage.pageCurrent,pageSize:cardPage.pageSize}).then(res=>{
        console.log('会员卡cardInfo:',res)
        //todo 如下实现的分页是假分页  需要后端返回真分页的数据  总数据量 
        let start = (cardPage.pageCurrent - 1) * cardPage.pageSize;//开始位置
        let end = cardPage.pageCurrent * cardPage.pageSize;//结束位置 数组的截取的时候 [start,end) suo所以不用-1 
        cardInfoData.value = res.data.slice(start, end)
        cardPage.total=res.data.length
    })
    // getClassInfo().then(res=>{
    //      console.log('上课记录classInfo:', res)
    //      classInfoData.value=res.data
    // })
    // getConsumeInfo().then(res=>{
    //     console.log('消费记录consumeInfo:', res)
    //     consumeInfoData.value=res.data
    // })
    // getReserveInfo().then(res=>{
    //     console.log('预约记录ReserveInfo:', res)
    //     reserveInfoData.value=res.data
    // })

}
getData()
//当点击不同的tabs标签的时候 数据更新
const handleClick = (tab, event) => {
   /*  console.log(tab.paneName, event)
    activeName.value = tab.paneName
    console.log(activeName.value) */
    if(tab.paneName=='first'){
        getData()

    }else if(tab.paneName=='second'){//预约记录
        //todo  调用后端接口 查询数据
        getReserveInfo().then(res=>{
            console.log('预约记录ReserveInfo:', res)
            reserveInfoData.value=res.data
        })

    }else if(tab.paneName=='third'){//上课记录
        //todo  调用后端接口 查询数据
        getClassInfo().then(res=>{
             console.log('上课记录classInfo:', res)
             classInfoData.value=res.data
        })
    }else if(tab.paneName=='fourth'){//消费记录
        //todo  调用后端接口 查询数据
        getConsumeInfo().then(res=>{
            console.log('消费记录consumeInfo:', res)
            consumeInfoData.value=res.data
        })
    }
}


//状态改变 
const changeSwitch = (status) => {
    console.log('---状态---', status)
}

//充值的操作
const rechargeDrawer = ref(false)
const handleClose = (done) => {
    ElMessageBox.confirm('确定要关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
//充值的的数据
const  rechargeForm  = reactive({
    id:0,
    //充值次数
    validCount:1,
    //延长有效期
    validDay:0,
    //实收金额
    receivedMoney:20,
    //支付方式
    payMode:[],
    //支付备注
    note:''
})

//保存充值的信息
const   saveRechargeInfo=()=>{
    //todo  调用后台接口 保存充值信息
    console.log('----保存充值的信息--')
      ElMessage({
        message: '保存充值成功.',
        type: 'success',
    })
    
}

//扣费的抽屉 
const  consumeDrawer=ref(false)
//扣费的表单数据
const  consumeForm=reactive({
    //课程id
    scheduleId:null,
    //会员id
    memberId:null,
    //卡id
    cardBindId:null,
    //扣除次数
    cardCountChange:null,
    //消费金额
    amountOfConsumption:null,
    //备注
    note:''

})
//打开扣费的抽屉 
const  openConsume=(row)=>{
    consumeDrawer.value = !consumeDrawer.value
    //todo 课程id  需要调用远程接口获取课程信息

    //row 会员卡的id 
    // consumeForm.memberId = memberMsg.id 
    consumeForm.cardBindId = row.id
}
// 扣费记录中 选择课程 远程查询
const loading = ref(false)
const  remoteClassData = ref([])
const remoteMethod =()=>{
   loading.value = true
   setTimeout(() => {
    loading.value=false
    //todo 调用接口查询课程 
     getRemoteClass().then(res=>{
        console.log('课程数据：',res)
        remoteClassData.value =res.data
        console.log('remoteClassData：',remoteClassData.value)
     })
   }, 2000);
}

//保存扣费信息
const saveConsumeInfo = ()=>{
    //todo 完成扣费信息的保存

    console.log('=======保存扣费信息 todo需要实现=======')
}


//操作记录 
const  operateRecordDrawer = ref(false)
const search = ref('')
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.operator.toLowerCase().includes(search.value.toLowerCase())
    )
)
//操作记录的数据模拟
const tableData = ref([])
//点击操作记录按钮 
const  openOperateRecord = (row)=>{
    //todo 调用接口 查询操作记录
    getOperateRecord().then(res=>{
        tableData.value = res.data
    })
    //打开抽屉
    operateRecordDrawer.value = true  
}




</script >
<style lang="less" scoped>
.member-form{
    // border: 1px solid #848383;
    border: 1px solid #d0d0d0;
    margin-top: 8px;
    padding: 10px 10px;
    border-radius: 5px;
    .el-form-item{
        width: 45%;
    }
}
.btn-opt{
    font-size: 13px;
    .el-button{
        margin-left: 3px;
        font-size: 13px;
        padding: 1px 6px;
    }
}
.mt20{
    margin-top: 20px;
}

.w50{
    width: 50%;
}

.div-form{
    text-align: center; 
    width: 90%;
    margin-left: 20px;
}
.handle-box {
	margin-bottom: 20px;  
}
.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}
</style>